<template>
  <el-tabs type="border-card" class="tabs-1" @tab-click="companyChange">
    <!-- 本支部的标签页 -->
    <el-tab-pane label="本支部">
      <el-tabs tab-post="left" @tab-click="TabChange">
        <!-- 入党积极分子分栏 -->
        <el-tab-pane label="入党积极分子">
          <!-- 入党积极分子表格 -->
          <el-table v-loading="loading" :data="TableData_jjfz" class="table-1" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
            <el-table-column fixed="right" label width="100">
              <template slot="header">
                <el-button plain icon="el-icon-plus" @click="handleInfoAdd">添加</el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="handleClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
        <el-tab-pane label="党员发展对象">
          <el-table v-loading="loading" :data="TableData_fzdx" class="table-1" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
            <el-table-column fixed="right" label width="100">
              <template slot="header">
                <el-button plain icon="el-icon-plus" @click="handleInfoAdd">添加</el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="handleClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
        <el-tab-pane label="预备党员">
          <el-table v-loading="loading" :data="TableData_ybdy" class="table-1" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
            <el-table-column fixed="right" label width="100">
              <template slot="header">
                <el-button plain icon="el-icon-plus" @click="handleInfoAdd">添加</el-button>
              </template>
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="handleClick(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="其它支部">
      <CompanySelector />
      <el-tabs tab-post="left" @tab-click="TabChange">
        <!-- 入党积极分子分栏 -->
        <el-tab-pane label="入党积极分子">
          <!-- 入党积极分子表格 -->
          <el-table v-loading="loading" :data="TableData_jjfz" class="table-1" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
        <el-tab-pane label="党员发展对象">
          <el-table v-loading="loading" :data="TableData_fzdx" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
        <el-tab-pane label="预备党员">
          <el-table v-loading="loading" :data="TableData_ybdy" height="400">
            <el-table-column label="序号" type="index" fixed="left" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="username" label="姓名" />
            <el-table-column fixed label="类别">
              <template slot-scope="scope">
                <span>{{ getClassify(scope.row.classify) }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed prop="post" label="职别" />
            <el-table-column fixed prop="natipl" label="籍贯" />
            <el-table-column fixed prop="borntime" label="出生年月" />
            <el-table-column fixed prop="ruwutime" label="入wu时间" />
          </el-table>
          <Pagination :pagesetting.sync="page" :total-count="totalCount" />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <!-- Dialog--提交信息--编辑信息 -->
    <el-dialog v-if="dialogInfoForm" :title="formTitle" :visible.sync="dialogInfoForm">
      <el-form ref="Info_form" :model="Info_form">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="Info_form.username" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="Info_form.gender">
            <el-option label="男" value="男" selected />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="类别" prop="classify">
          <el-select v-model="Info_form.classify">
            <el-option label="入党积极分子" value="jjfz" />
            <el-option label="党员发展对象" value="fzdx" />
            <el-option label="预备党员" value="ybdy" />
          </el-select>
        </el-form-item>
        <el-form-item label="部职别" prop="post">
          <el-input v-model="Info_form.post" />
        </el-form-item>
        <el-form-item label="出生年月" prop="borntime">
          <el-date-picker
            v-model="Info_form.borntime"
            type="month"
            placeholder="选择日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="入伍时间" prop="ruwutime">
          <el-date-picker
            v-model="Info_form.ruwutime"
            type="month"
            placeholder="选择日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="Info_form.nation" />
        </el-form-item>
        <el-form-item label="籍贯" prop="natipl">
          <el-input v-model="Info_form.natipl" />
        </el-form-item>
        <el-form-item label="学历" prop="educa">
          <el-input v-model="Info_form.educa" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('Info_form')">立即提交</el-button>
          <el-button @click="resetForm('Info_form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-tabs>
</template>
<script>
import { getDyfzMembers } from '@/api/zzxt'
export default {
  name: 'Dyfz',
  components: {
    CompanySelector: () => import('@/components/Company/CompanySelector'),
    Pagination: () => import('@/components/Pagination')
  },
  data: () => ({
    loading: false,
    dialogInfoForm: false,
    Info_form: {},
    LeftTab: { index: '0' },
    TableData_jjfz: [],
    TableData_fzdx: [],
    TableData_ybdy: [],
    optionFlag: true,
    dialogVisiable: false,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: '0',
    query_api: {
      classify: '',
      companyid: 'local'
    }
  }),
  watch: {
    page: {
      handler(val) {
        this.page = val
        const tab = this.LeftTab
        this.updateTableData(tab)
      },
      deep: true
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    companyChange(tab) {
      if (tab.index === '0') {
        this.query_api.companyid = 'local'
      } else {
        this.query_api.companyid = 'else'
      }
      const tab1 = { index: '0' }
      this.updateTableData(tab1)
    },
    refresh() {
      const page = this.page
      this.query_api.classify = 'jjfz'
      getDyfzMembers(Object.assign(this.query_api, { page })).then(data => {
        this.totalCount = data.totalCount
        this.TableData_jjfz = data.list
      })
    },
    TabChange(tab) {
      this.page = { pageIndex: 0, pageSize: 10 }
      this.LeftTab = tab
      this.updateTableData(tab)
    },
    updateTableData(tab) {
      this.loading = true
      const page = this.page
      if (tab.index === '0') {
        this.query_api.classify = 'jjfz'
        getDyfzMembers(Object.assign(this.query_api, { page })).then(data => {
          this.totalCount = data.totalCount
          this.TableData_jjfz = data.list
          this.loading = false
        })
      } else if (tab.index === '1') {
        this.query_api.classify = 'fzdx'
        getDyfzMembers(Object.assign(this.query_api, { page })).then(data => {
          this.totalCount = data.totalCount
          this.TableData_fzdx = data.list
          this.loading = false
        })
      } else {
        this.query_api.classify = 'ybdy'
        getDyfzMembers(Object.assign(this.query_api, { page })).then(data => {
          this.totalCount = data.totalCount
          this.TableData_ybdy = data.list
          this.loading = false
        })
      }
    },
    handleClick(row) {
      this.$router.push({
        path: '/dyfz/user',
        name: 'user',
        params: { key: '0101', TableData: row }
      })
    },
    handleInfoAdd() {
      this.Info_form = {}
      this.dialogInfoForm = true
    },
    setOptionFlag() {
      this.optionFlag = true
    },
    getClassify(temp) {
      switch (temp) {
        case 'jjfz': {
          return '入党积极分子'
        }
        case 'fzdx': {
          return '党员发展对象'
        }
        case 'ybdy': {
          return '预备党员'
        }
      }
    }
  }
}
</script>
